<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>支付</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  <style>
    * {
      margin: 0;
      border: 0;
      box-sizing: border-box;
    }
    .view{
      width: 1000px;
      margin: auto;
    }
    .flex{
      display: flex;
    }
    html,body{
      height: 100%;
    }
    #mainBody {
      flex-direction: column;
      height: 100%;
      padding-top: 70px;
    }
    .header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 70px;
      border-bottom: solid #e9e9e9 1px;
      box-shadow: 0 2px 2px #f2f2f2;
      background: #fff;
      z-index: 100;
      /*border: 1px solid #ccc;*/
      /*background-color: #571b3b;*/
    }
    .solid{
      width: 2px;
      height: 50px;
      background-color: #555;
      margin: 0 20px;
    }
    .qu1{
      width: 50%;
      /*color: #fff;*/
      text-align: center;
      align-self:center;
    }
    .left_page{
      height: 680px;
    }
    .logo{
      height: 100px;
      border-bottom: 3px solid #ff7701;
    }
    .logo_item{
      flex: 1;
      align-items: center;
      text-align: right!important;
      padding-right: 20px;

    }
    .logo_item img{
      height: 60px;
      width: 120px;
      margin: 10px 0;
    }
    .left{
      flex: 1;
      /*border: 1px solid #ccc;*/
      background-color: #f7f1e9;
    }
    #code{
      margin: auto;
      width: 200px;
      height: 200px;
    }
    #code img{
      width: 100%;
      height: 100%;
    }
    .code_top{
      height: 160px;
      position: relative;
    }
    .pos_img{
      position: absolute;
      left: 640px;
      top: 90px;
    }
    .wxin-table{
      margin: auto;
      border: 1px solid #ccc;
    }
    .wxin-table td{
      border: 1px solid #ccc;
    }
    @media screen and (max-width: 750px) {
      .xiaoqu{
        width: 0!important;
      }
      .logo{
        flex-wrap: wrap;
      }
      .logo_item{
        width: 100%;
      }
    }

  </style>
</head>
<body>
<div id="mainBody">
  <div class="header">
    <div class="view flex" style="align-items: center">
      <img style="height: 60px;margin-top: 5px;width: 120px;border-radius: 50%" src="./img/logo2.jpg" alt="">
      <span style="padding-left: 20px;border-left: solid #e1e1e1 1px;height: 34px;line-height: 34px;font-size: 19px;margin-left: 20px">万通支付</span>
    </div>

  </div>
  <div class="logo flex view">
    <div class="flex" style="padding-top: 65px">
      <h3 class="amount">0</h3> <h3>元</h3> <span style="padding-left: 40px;padding-top: 5px;font-size: 14px;color:  #4e4e4e">收款方：万通支付</span>
    </div>
    <div class="logo_item " style="font-size: 40px;text-align: center;align-self: center">
      倒计时：<span class="set_time"></span> 秒
    </div>
  </div>
  <div class="left_page">
    <div class="view code_top">

      <!--<div class="xiaoqu" style="width: 40%"></div>-->
      <div style="text-align: center;padding: 20px">
       <div class="flex" style="justify-content: space-around;">

         <div>订单号：<span class="orderNo"></span></div>
         <div>订单金额：<span class="amount"></span>元</div>
         <div>订单内容：<span class="orderContent"></span></div>
       </div>
         <h4 class="remark" style="padding: 5px;width: 350px;margin: auto"><b></b></h4>
        <h3 class="title" style="padding-top: 50px">
          <b></b>
        </h3>
      </div>
      <img class="pos_img" src="${host}/img/img4.png" alt="">

    </div>


    <div id="code" class="qrcode">
      <img src="" alt="">
    </div>
    <div style="text-align: center;font-size: 14px;color: #ccc;padding: 5px">
      打开<span  class="title"><b></b></span>手机客户端扫一扫
    </div>
    <table class="wxin-table" width="394" border='1' cellpadding="0" cellspacing="0">

      <tr>
        <td width="125" height="44" style="text-align: center" bgcolor="#fbfbfb">交易金额:</td>
        <td width="266" height="44" style="padding-left: 20px" bgcolor="#ffffff" ><font   color="#ff7700"><strong><b class="amount"></b> 元</strong></font></td>
      </tr>
      <tr>
        <td width="125" height="44" style="text-align: center" bgcolor="#fbfbfb">支付方式:</td>
        <td width="266" height="44" style="padding-left: 20px" bgcolor="#ffffff" class="title"><font color="#ff7700"><strong><b></b></strong></font>
        </td>
      </tr>
    </table>
  </div>
</div>
</body>
<script>
  /**
   * 生产二维码
   * @param text 参数
   */
  function getQrcode(url) {
    $("#code").html('')
    $("#code").qrcode({
      render: 'canvas', // 渲染方式有table方式和canvas方式
      width: 200, //默认宽度
      height: 200, //默认高度
      text: url, //二维码内容
      typeNumber: -1, //计算模式一般默认为-1
      correctLevel: 2, //二维码纠错级别
      background: '#ffffff', //背景颜色
      foreground: '#000000' //二维码颜色
    });
  }


  /**
   * 判断打开方式是手机或电脑
   * @param success
   */
  function browserRedirect(success) {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
      success("手机")
    } else {
      success("电脑")
    }
  }
  // 倒计时
  function leftTimer(num) {

    time_id = setInterval(function () {
      $('.set_time').html(num)
      if (num == 0) {
        clearInterval(time_id)
      }
      num--
    }, 1000)
  }
  // 判断支付状态
  function getOrderStatus () {
    // var url = '${host}/v2/query/${orderId}'
    var url = '${host}/v2/query/${orderId}'
    getJqueryAjax(url, function (data) {
      if (data.data == 4 || data.data == 5 || data.data == 6) {
        if (frontUrl) {
          location.href = frontUrl
        }
        clearInterval(set_id)
        clearInterval(time_id)
        alert('支付成功')
        $('.qrcode img').attr('src', '${host}/img/success.jpg')
      }
    })
  }

  //jquery的ajax请求
  function getJqueryAjax (url, success) {

    $.ajax({
      type: 'get',
      url: url,
      data: {},
      dataType: 'json',
      beforeSend: function (xhr) {
        console.log('start')
      },
      success: function (data) {
        success(data)
        $('.orderNo').text(data.data.outOrderNo)
        $('.orderContent').text(data.data.body)
        $('.amount').text(data.data.amount)
        $('.remark b').text(data.data.remark)
        //jquery的ajax请求
        switch (data.data.payType) {
          case 1:
            $('.title b').text('支付宝')
            break
          case 3:
            $('.title b').text('京东')
            break
          case 4:
            $('.title b').text('QQ')
            break
          case 5:
            $('.title b').text('网银快捷')
            break
          case 6:
            $('.title b').text('微信')
            break
          case 9:
            $('.title b').text('银联扫码')
            break
          default:
            break
        }
      },
      error: function (err) {
        console.log('error')
      }
    })

  }


</script>
<script>
  var panUrl = 'https://pan.baidu.com/share/qrcode?w=200&h=200&url='
  var text = 'hello world!' + Date.now()

  leftTimer(240)
  var set_id
  var time_id
  var frontUrl
  browserRedirect(function (data) {
    // var baseUrl = '${host}/v2/${orderId}/'5882
    var baseUrl = '${host}/v2/${orderId}/'
    if (data == '电脑') {
      $('.show').css('display', 'block')
      $('.show-back').css('display', 'none')
      getJqueryAjax(baseUrl + '2', function (data) {
        if (data.code == '000000') {
          if (data.data.notifyMsg) {
//            app.$alert(data.data.notifyMsg, '提示', {
//              confirmButtonText: '确定',
//              type: 'info',
//              callback: action => {
//
//              }
//            })
            var attr = data.data.code.split('||')
            if (attr[0] == 'image') {
              $('.qrcode img').attr('src', attr[1])

            } else {
              $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
            }
            frontUrl = data.data.frontUrl
          } else {
            var attr = data.data.code.split('||')
            if (attr[0] == 'image') {
              $('.qrcode img').attr('src', attr[1])
            } else {
              $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
            }
            frontUrl = data.data.frontUrl
          }

        }

      })
    }
    if (data == '手机') {
      $('.show').css('display', 'none')
      $('.show-back').css('display', 'block')
      getJqueryAjax(baseUrl + '1', function (data) {
        if (data.code == '000000') {
          var skipUrl = data.data.code
          var payType = data.data.payType
          if (data.data.notifyMsg) {
//            app.$alert(data.data.notifyMsg, '提示', {
//              confirmButtonText: '确定',
//              type: 'info',
//              callback: action => {
//
//              }
//            })
            if (payType == 2 || payType == 7 || payType == 8) {
              window.location.href = skipUrl
            } else {
              var attr = data.data.code.split('||')
              if (attr[0] == 'image') {
                $('.qrcode img').attr('src', attr[1])
              } else {
                $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
              }
            }
          } else {
            if (payType == 2 || payType == 7 || payType == 8) {
              window.location.href = skipUrl
            } else {
              var attr = data.data.code.split('||')
              if (attr[0] == 'image') {
                $('.qrcode img').attr('src', attr[1])
              } else {
                $('.qrcode img').attr('src', panUrl + encodeURIComponent(data.data.code))
              }
            }
          }

        }

      })

    }

  })




  getOrderStatus()
  set_id = setInterval(function () {
    getOrderStatus()
  }, 5000)
</script>

</html>
